<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useCardInfo } from '@/store/modules/cart'
import { useUserStore } from '@/store/modules/user'
import QIcon from '@/components/q-icon/q-icon.vue'
import Storage from '@/libs/storage'
import { usePropertiesListStore } from '@/store/modules/propertiesList'

import { storeToRefs } from 'pinia'

const { getterPropertiesList } = storeToRefs(usePropertiesListStore())

const storage = new Storage()
const $cardInfo = useCardInfo()
const $router = useRouter()
const toTop = () => {
  document.querySelector(`#toTop`)?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
}

const $userStore = useUserStore()

const toCar = () => {
  if (!$userStore.getterToken) {
    $userStore.loginTypeTrue()
    return
  }

  $router.push({
    path: '/shoppingcart',
    query: {},
  })
}

const otherData = ref()
otherData.value = getterPropertiesList.value
</script>
<template>
  <div class="top">
    <!-- 客服 -->
    <!-- <div v-if="otherData?.otherData?.service" class="box">
            <QIcon name="icon-lianxikefu" size="24px" color="#F54319" />
            <span>联系客服</span>
            <div></div>
        </div> -->
    <div v-if="otherData?.otherData?.car" class="box" @click="toCar">
      <QIcon name="icon-gouwuche1" size="24px" color="#333" />
      <p>
        <el-badge v-if="$cardInfo.count" :max="99" class="search__cart--num" :value="$cardInfo.count" />
        <span>购物车</span>
      </p>
      <div />
    </div>
    <div class="box" @click="toTop">
      <QIcon name="icon-Top" size="24px" color="#F54319" />
      <span style="color: #f54319">TOP</span>
      <div style="height: 0" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@include b(top) {
  position: fixed;
  bottom: 48.3%;
  right: 0;
  // left: 50%;
  // transform: translateX(631px);
  width: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  border: 1px solid #d7dce4;
  border-radius: 0px 0px 2px 2px;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05);
  z-index: 10;
}
@include b(CartNum) {
  position: absolute;
  top: 10px;
  right: 0;
}
@include b(box) {
  width: 60px;
  height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  cursor: pointer;
  img {
    width: 24px;
    height: 24px;
  }
  span {
    font-size: 12px;
    line-height: 14px;
    zoom: 0.9;
  }
  div {
    width: 24px;
    height: 1px;
    background-color: #000;
    opacity: 0.1;
    transform: translateY(1px);
  }
}
:deep() {
  .el-badge {
    height: 0 !important;
    width: 0px !important;
    opacity: 1 !important;
  }
  .el-badge__content--danger {
    background-color: #f54319 !important;
    height: 14px;
    font-size: 12px;
    zoom: 0.7;
    padding: 7px 5px;
    position: absolute;
    top: -73px;
    left: 30px;
  }
}
</style>
